<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>流程管理</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/static/css/dj-css.css">
    <style>
        /*公共样式*/
        .fl {
            float: left;
        }

        .x-red {
            color: red;
        }

        .layui-form-item {
            line-height: 38px;
        }

        body {
            background: #f4f6f8;
            padding-top: 16px;
            padding-left: 20px;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            display: block;
            height: 0;
            visibility: hidden;
            opacity: 0;
            clear: both;
            content: '';
        }

        /*本页面样式*/
        h2 {
            font-size: 18px;
            font-weight: bold;
            line-height: 32px;
            margin-right: 20px;
            background: #fff;
            padding: 18px 0 18px 18px;

        }

        h2:after {
            display: block;
            content: "";
            float: left;
            width: 4px;
            height: 32px;
            background-color: #35a3e5;
            margin-right: 15px;
        }

        .main {
            margin-top: 20px;
            margin-right: 20px;
            padding: 22px 36px 40px 36px;
            background: #fff;
        }

        form{
            padding-bottom:22px;
            border-bottom:1px solid #bcbcbc;
        }
        form button {
            font-size: 16px;
        }


        form .search {
            width: 74px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            border: 0;
            border-radius: 2px;
            background-color: #35a3e5;
            margin-left: 10px;
            margin-right: 28px;
        }

        form .createFlow {
            padding-left:32px;
            padding-right:12px;
            height: 38px;
            border: 1px solid #35a3e5;
            border-radius: 2px;
            background-color: transparent;
            color: #35a3e5;
            position: relative;
        }

        form .createFlow:after {
            display: block;
            position: absolute;
            top: 12px;
            left: 16px;
            content: "";
            width: 3px;
            height: 15px;
            background-color: #35a3e5;

        }

        form .createFlow:before {
            display: block;
            position: absolute;
            top: 18px;
            left: 10px;
            content: "";
            width: 15px;
            height: 3px;
            background-color: #35a3e5;
        }

        table {
            width: 100%;
            color: #666;
            margin-top: 31px;
            margin-bottom: 20px;
        }

        table thead {
            background-color: #e2e9ed;
        }

        table th, table td {
            height: 52px;
            text-align: center;
        }

        table th:after {
            display: block;
            float: right;
            content: "";
            height: 24px;
            width: 1px;
            background-color: #f3f6f8;
        }

        table th:last-child:after {
            display: none;
        }

        table tbody tr {
            border-bottom: 1px dashed #ddd;
            font-size: 14px;
        }

        table tbody tr:last-child {
            border-bottom: 1px solid #ddd;
        }

        table td:after {
            display: block;
            float: right;
            content: "";
            height: 24px;
            width: 1px;
            background-color: #f1f1f1;
        }

        table td:last-child:after {
            display: none;
        }

        table .operate button {
            height: 24px;
            padding: 0 13px;
            border: 0;
            color: #fff;
            border-radius: 2px;
            cursor: pointer;
        }

        table .operate button.show {
            background-color: #1692dc;
        }

        table .operate button.del {
            background-color: #ff9600;
        }

        table .operate button.turnToModel {
            background-color: #4ad58b;
        }

        .footer input {
            width: 59px;
            height: 25px;
            outline: 0;
            text-align: center;
            margin-left: 6px;
            margin-right: 10px;
        }

        .footer .rowsPerPage {
            margin-right: 55px;
        }

        .footer .turnPage span {
            cursor: pointer;
        }

        .footer .turnPage span:hover {
            border-bottom: 1px solid #ddd;
        }

        .footer .turnPage span.selectPage:hover {
            border-bottom: 0;
        }

        .footer .turnPage .firstPage {
            margin-right: 26px;
        }

        .footer .turnPage .lastPage {
            margin: 0 16px 0 26px;
        }
        /*控制弹出框标题样式*/
        body .layer-style .layui-layer-title{
            background-color: #ecf0f2;
            height:58px;
            line-height:58px;
            padding-left:30px;
        }
        body .layer-style .layui-layer-setwin{
            top:21px;
        }
    </style>
</head>
<body>
<div id="createApp">

    <h2>权限管理</h2>
    <div class="main">
        <form class="layui-form layui-form-pane clearfix">
            <div class="layui-form-pane fl">
                <button type="button" class="createFlow" @click="addFlow">添加新权限</button>
            </div>
        </form>
        <table class="" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>流程分类</th>
                <th>流程ID</th>
                <th>流程标识</th>
                <th>流程名称</th>
                <th>流程版本</th>
                <th>部署时间</th>
                <th>流程XML</th>
                <th>流程图片</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>分类1</td>
                <td>123</td>
                <td>leave</td>
                <td>请假流程</td>
                <td>V：3</td>
                <td>2017-04-01 12:11:00</td>
                <td>leave:lkj.xml</td>
                <td>leave.png</td>
                <td class="operate">
                    <button class="show">挂起</button>
                    <button class="del">删除</button>
                    <button class="turnToModel">转化为模型</button>
                </td>
            </tr>
            <tr>
                <td>分类1</td>
                <td>123</td>
                <td>leave</td>
                <td>请假流程</td>
                <td>V：3</td>
                <td>2017-04-01 12:11:00</td>
                <td>leave:lkj.xml</td>
                <td>leave.png</td>
                <td class="operate">
                    <button class="show">挂起</button>
                    <button class="del">删除</button>
                    <button class="turnToModel">转化为模型</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item clearfix footer">
            <div class="fl rowsPerPage ">
                每页显示 <input type="number" value="5">条，共 <span>50</span>条
            </div>
            <div class="fl turnPage ">
                <span class="firstPage">首页</span>
                <span class="prePage">上一页</span>
                <span class="selectPage"><input type="text" value="1">/ <b>10</b> </span>
                <span class="nextPage">下一页</span>
                <span class="lastPage">末页</span>
                <span class="goPage">确认</span>
            </div>
        </div>
    </div>
</div>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/lib/vue.min.js"></script>
<script src="/static/lib/x-layui.js"></script>
<script src="/static/lib/dj-js.js"></script>
<script type="text/javascript">


    var myid = "${department.id}";
    if (myid == "") {
        var kid = ""
    } else {
        kid = "$!{department.id}"
    }
    var VM = new Vue({
        el: "#createApp",
        created: function () {
            this.lay();
//            this.getDeptList();
        },
        data: {

            parameter: {
                "leave_type": "",

            }
        },
        methods: {
            lay: function () {
                layui.use(['layer', 'laydate'], function () {
                    var     layer = layui.layer,
                            laydate = layui.laydate;

                });
            },
            verify: function (item) {
                if (item == "") {
                    layer.msg("必填项不能为空！", {icon: 5});
                    return false;
                }
            },
            sub: function () {
                var _this = this;
                this.parameter.leave_type = $("#leave_type").html();
                this.parameter.start_time = $("#LAY_demorange_s").val();
                this.parameter.end_time = $("#LAY_demorange_e").val();
                this.parameter.reason = $("#reason").val();
                $.ajax({
                    type: "post",
                    url: "../../activiti/startleave.do",
                    data: _this.parameter,
                    dataType: "json",
                    success: function (data) {
                        layer.msg("提交成功！", {icon: 1});
//                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
//                        parent.layer.close(index);
//                        parent.window.location.reload();
//                        window.location.href = "javascript:location.replace(location.href)";
                    }
                });
            },
            reset: function () {
                $("#leave_type").html("请选择请假类型");
                $("#leave_type").attr("selectedCode", "");
                $(".dj-select-list li").removeClass("selected");
                $("#LAY_demorange_s").val("");
                $("#LAY_demorange_e").val("");
                $("#reason").val("");
            },
            addFlow:function(){
                admin_add("添加新权限","./addAuthority.html",'550','260');
            }
        }
    });//vue 实例结束


</script>
</body>
</html>